<template>
    <header>
        <div class="l-content">
            <!-- <div class="img_logo">
                <img src="../assets/images/logo/logo3.png" alt="">
            </div> -->
            <!-- <el-button plain icon="el-icon-menu" size="mini" @click="collapseMenu"></el-button> -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="current.path" v-if="current.label !== '首页'">
                    {{current.label}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown trigger="click" size="small">
                <span class="el-dropdown-link" v-if="StaffInfo">
                    <!-- <img :src="userImg" alt="" class="user"> -->
                    {{StaffInfo.NameCh}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item @click.native="userCenter()">个人中心</el-dropdown-item>
                    <el-dropdown-item  @click.native="drawer = true">点我试试</el-dropdown-item> -->
                    <el-dropdown-item divided @click.native="loginOut()">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!-- 抽屉 -->
        <el-drawer
            title="我是标题"
            size="20%"
            :visible.sync="drawer"
            :with-header="false">
            <div class="myDrawer">
              <div>
                好好学习，天天向上

                <div>

                  <a href="https://gitee.com/chenhoudong" target="_blank">我的码云</a>
                </div>
              </div>
            </div>
        </el-drawer>
    </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    })
  },
  data () {
    return {
      StaffInfo: {},
      // userImg: require('../assets/images/profile.jpg'),
      drawer: false
    }
  },
  methods: {
    collapseMenu () {
      this.$store.commit('collapseMenu')
    },
    // 个人中心
    userCenter () {
      // console.log('个人中心')
      this.$router.push('/safe')
    },
    // 退出登陆
    loginOut () {
      if (sessionStorage.getItem('StaffInfo')) {
        window.sessionStorage.clear()
      }
      this.$router.push('/login')
    }
  },
  created () {
    // console.log(this.current)
    this.StaffInfo = JSON.parse(sessionStorage.getItem('StaffInfo'))
  }
}
</script>

<style lang="scss" scoped>
header {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0px 35px 0px 15px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    background-color: #494949;
}
.l-content {
    display: flex;
    align-items: center;
    .img_logo{
      img{
        height: 100%;
        width: 200px;
      }
    }
    .el-button{
        margin-right: 20px;
    }
}
.r-content {
    .el-dropdown-link{
      outline: none;
      cursor: pointer;
      color: #fff;
      img{
        padding: 1px;
      }
    }
    .user{
        width: 40px;
        height: 40px;
        border-radius: 20%;
        background-color: rgb(230, 218, 200);
    }
}
</style>

<style lang="scss">
.l-content {
    /deep/.el-breadcrumb__item {
        .el-breadcrumb__inner {
            // color: #666666;
            font-weight: normal;
            color: #fff;
        }
        &:last-child {
            .el-breadcrumb__inner {
                // color: #000;
                cursor: pointer;
            }
        }
    }
}

.myDrawer{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
